<template>
    <!-- 空心按钮 -->
    <button :class="clazzList" :style="style" >
        <van-icon :name="props.icon" :size="iconSize" :color="props.color" v-if="props.icon?.length > 0" />
        <slot></slot>
    </button>
 
</template>

<script setup lang="ts">
const props = defineProps(['size', 'color', 'icon', 'icon-color'])

// 类列表
const clazzList = computed(() => {
    const clazzList = [props.size]
    return clazzList
})

// 自定义样式
const style = computed(() => {
    const styles = []
    if (props.color?.length > 0) {
        styles.push(`color: ${props.color}`)
    }
    return styles.join(";")
})

const iconSize = computed(() => {
    if ("normal" == props.size) {
        return "1em"
    } else if ("small" == props.size) {
        return "0.85em"
    }
    return "1em"
})


</script>

<style scoped>
button {
    background-color: transparent;
    border-radius: 15px;
    border: 1.5px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: none !important;
}

.van-icon {
    margin-right: 3px;
}

.small {
    padding-left: 10px;
    padding-right: 10px;
    font-size: var(--van-button-small-font-size);
}

.normal {
    padding-left: 15px;
    padding-right: 15px;
    /* --van-button-normal-font-size为14px */
    font-size: var(--van-button-normal-font-size); 
}

</style>